<template>
  <div class="app-container">
    <div class="layout-content">
      <div class="clock-header">
        <div class="title">学生就寝数据</div>
        <div class="flush" @click="flushData"></div>
      </div>
      <div class="timer">{{formatTodayTime()}}</div>
      <select class="selector-label class-name" v-model="selectClass" @change="loadClockData">
        <option v-for="item in classList" :key="item.deptId" :value="item.deptId" >
          {{item.name}}
        </option>
      </select>
      <select class="selector-label date-time" v-model="selectDateCode" @change="loadClockData">
        <option v-for="item in dateList" :value="item">
          {{formatDateTime(item)}}
        </option>
      </select>
      <div class="count-label">
        <div class="count">
          <div class="count-name">总人数</div>
          <div class="count-num">{{ studentCount }}</div>
        </div>
        <div class="count">
          <div class="count-name">已就寝</div>
          <div class="count-num count-num-done">{{ completeCount }}</div>
        </div>
        <div class="count">
          <div class="count-name">未就寝</div>
          <div class="count-num count-num-no">{{ unCompleteCount }}</div>
        </div>
      </div>
      <div class="tab-label">
        <div class="tab-index" :class="selectTab===0?'selected':''" @click="selectTabIndex(0)">全部</div>
        <div class="tab-index" :class="selectTab===1?'selected':''" @click="selectTabIndex(1)">已就寝</div>
        <div class="tab-index" :class="selectTab===2?'selected':''" @click="selectTabIndex(2)">未就寝</div>
      </div>
      <div class="member-list">
        <div class="member-index" v-for="item in studentList" :key="item.uid" v-if="isShowIndex(item.clockStatus)">
          <div class="row">
            <div class="name">{{item.name}}</div>
            <div class="clock-status status-done" v-if="item.clockStatus===100 || item.clockStatus===200">未就寝</div>
            <div class="clock-status status-no" v-if="item.clockStatus===101 || item.clockStatus===201">未就寝</div>
          </div>
          <div class="row">
            <div class="phone">手机号：{{item.mobile}}</div>
            <div class="clock-time">{{item.clockInTime}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style src="./index.css"></style>
<style scoped lang="less"></style>
<script>
import {queryClockInData, listAllClass} from '@/api/clockin';
export default {
  name: 'clockin',
  components: {},
  data() {
    return {
      completeCount: 0,
      studentCount: 0,
      unCompleteCount: 0,
      studentList: [],
      classList:[],
      dateList: [],
      selectClass: 0,
      selectDateCode: '',
      selectTab: 0,
    }
  },
  created() {
    this.initPage()
    console.log("created")
  },
  mounted() {
    console.log("mounted")
  },
  destroyed() {
    console.log("destroyed")
  },
  methods: {
    initPage() {
      this.initDateList();
      let that = this
      listAllClass({}).then(res => {
        if (res.code === 0) {
          this.classList = res.data.list
          this.selectClass = res.data.list[0].deptId
          that.loadClockData();
        }
      }).catch(e=>{

      })
    },
    isShowIndex(clockStatus) {
      if (this.selectTab===0) {
        return true
      }
      if (this.selectTab===1 && (clockStatus===100 || clockStatus===200)) {
        return true
      }
      if (this.selectTab===2 && (clockStatus===101 || clockStatus===201)) {
        return true
      }
      return false
    },
    selectTabIndex(tabIndex) {
      this.selectTab = tabIndex
      console.log((tabIndex))
    },
    formatTodayTime() {
      const today = new Date();
      const year = today.getFullYear();
      const month = today.getMonth() + 1; // 月份从0开始
      const day = today.getDate();
      // 中文星期数组
      const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const weekday = weekdays[today.getDay()];

      return `${year}年${month}月${day}日 ${weekday}`;
    },
    formatDateTime(dateStr) {
      const year = dateStr.substring(0, 4);
      const month = dateStr.substring(4, 6);
      const day = dateStr.substring(6, 8);
      const date = new Date(`${year}-${month}-${day}`);
      // 中文星期数组
      const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const weekday = weekdays[date.getDay()];
      return `${year}-${month}-${day} ${weekday}`;
    },
    initDateList() {
      const dates = [];
      const today = new Date();

      for (let i = 0; i < 30; i++) {
        const date = new Date(today);
        date.setDate(today.getDate() - i);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        dates.push(`${year}${month}${day}`);
      }
      this.dateList = dates;
      this.selectDateCode = dates[0];
    },
    flushData() {
      this.loadClockData();
    },
    loadClockData() {
      let params = {
        dateCode: this.selectDateCode,
        clockType: 10,
        deptId: this.selectClass,
      }
      console.log(params)
      let res = queryClockInData(params)
      res.then(response=>{
        if (response.code === 0) {
          this.studentCount = response.data.studentCount
          this.completeCount = response.data.completeCount
          this.unCompleteCount = response.data.unCompleteCount
          this.studentList = response.data.list
        }
      }).catch(e=>{
        console.log(e)
      })
    },
  }
}
</script>